.user-main {
  position: relative;
  background-color: #f3f3f3;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
/*------------------最大的盒子，包含change-message，detail元素----------------*/
.user {
  display: flex;
}
/*------------------左侧的盒子，change-message----------------*/
.change-message {
  display: flex;
  flex-direction: column;
  width: 250px;
  margin-right: 20px;
}
.change-message1 {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 15px;
  margin: 5px auto;
}
.change-message1 li {
  display: flex;
  justify-content: center;
}
.change-message1 li h3 {
  margin: 10px;
}
.change-message1 li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  margin: 5px auto;
  cursor: pointer;
}
.change-message1 li a:hover {
  color: #3fb34f;
}
.change-message2 {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 15px;
  margin: 5px auto;
}
.change-message2 li {
  display: flex;
  justify-content: center;
}
.change-message2 li h3 {
  margin: 10px;
}
.change-message2 li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  margin: 5px auto;
  cursor: pointer;
}
.change-message2 li a:hover {
  color: #3fb34f;
}
.change-message3 {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 15px;
  margin: 5px auto;
}
.change-message3 li {
  display: flex;
  justify-content: center;
}
.change-message3 li h3 {
  margin: 10px;
}
.change-message3 li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  margin: 5px auto;
  cursor: pointer;
}
.change-message3 li a:hover {
  color: #3fb34f;
}
.change-message4 {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 15px;
  margin: 5px auto;
}
.change-message4 li {
  display: flex;
  justify-content: center;
}
.change-message4 li h3 {
  margin: 10px;
}
.change-message4 li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  margin: 5px auto;
  cursor: pointer;
}
.change-message4 li a:hover {
  color: #3fb34f;
}
/*------------------右侧的盒子，detail-----------------*/
.detail {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.detail-mine {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin: 5px auto;
  background-color: #00a716a9;
  width: 100%;
  box-sizing: border-box;
}
.detail-mine .profile {
  display: flex;
  align-items: center;
}
.detail-mine .profile img {
  width: 100px;
  height: 100px;
}
.detail-mine .profile span {
  margin-left: 30px;
  color: #ffffff;
  font-size: 20px;
  /*加粗*/
  font-weight: bold;
}
.detail-mine .vip {
  display: flex;
  justify-content: space-between;
  width: 450px;
  padding: 20px;
}
.detail-mine .vip span {
  display: flex;
  color: #ffffff;
  font-size: 40px;
  justify-content: center;
}
.detail-mine .vip p {
  display: flex;
  color: #ffffff;
  font-size: 16px;
  justify-content: center;
}
/*-------------------------我的订单--------------------------*/
.detail-bill {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin: 5px auto;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
}
.detail-bill .bill0 {
  display: flex;
  justify-content: space-between;
}
.detail-bill .bill0 .right {
  margin-top: 10px;
}
.detail-bill .bill1 {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  border: 1px solid #f0f0f0;
  /* 添加外部边框线 */
}
.detail-bill .bill1 .part1 {
  display: flex;
}
.detail-bill .bill1 .part1 img {
  width: 230px;
  height: 230px;
}
.detail-bill .bill1 .part2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.detail-bill .bill1 .part2 .product {
  font-size: 18px;
  color: #2b2b2b;
}
.detail-bill .bill1 .part2 .type {
  font-size: 14px;
  color: #a7a7a7;
}
.detail-bill .bill1 .part3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 18px;
  color: #fd8d8d;
}
.detail-bill .bill1 .part4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 15px;
  padding: 15px;
  box-sizing: border-box;
  border-left: 1px solid #e7e7e7;
  /* 左边框 */
  border-right: 1px solid #e7e7e7;
  /* 右边框 */
  border-top: none;
  /* 去掉上边框 */
  border-bottom: none;
  /* 去掉下边框 */
}
.detail-bill .bill1 .part4 .price {
  font-size: 18px;
  color: #ff0000;
}
.detail-bill .bill1 .part5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.detail-bill .bill1 .part5 .button {
  font-size: 18px;
  color: #ffffff;
  background-color: #3fb34f;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.detail-bill .bill2 {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  border: 1px solid #f0f0f0;
  /* 添加外部边框线 */
}
.detail-bill .bill2 .part1 {
  display: flex;
}
.detail-bill .bill2 .part1 img {
  width: 230px;
  height: 230px;
}
.detail-bill .bill2 .part2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.detail-bill .bill2 .part2 .product {
  font-size: 18px;
  color: #2b2b2b;
}
.detail-bill .bill2 .part2 .type {
  font-size: 14px;
  color: #a7a7a7;
}
.detail-bill .bill2 .part3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 18px;
  color: #a7a7a7;
}
.detail-bill .bill2 .part3 .status {
  color: #fd8d8d;
}
.detail-bill .bill2 .part4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 15px;
  padding: 15px;
  box-sizing: border-box;
  border-left: 1px solid #e7e7e7;
  /* 左边框 */
  border-right: 1px solid #e7e7e7;
  /* 右边框 */
  border-top: none;
  /* 去掉上边框 */
  border-bottom: none;
  /* 去掉下边框 */
}
.detail-bill .bill2 .part4 .price {
  font-size: 18px;
  color: #ff0000;
}
.detail-bill .bill2 .part5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.detail-bill .bill2 .part5 .button {
  font-size: 18px;
  color: #ffffff;
  background-color: #3fb34f;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
}
/*---------------------我的收藏------------------------*/
.detail-collection {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin: 5px auto;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
}
.detail-collection .collection0 {
  display: flex;
  justify-content: space-between;
}
.detail-collection .collection0 .right {
  margin-top: 10px;
}
.detail-collection .collection1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  width: 992px;
  height: 500px;
}
.detail-collection .collection1 li {
  position: relative;
  width: 242px;
  height: 380px;
  border: 2px solid #fff;
  /* 超出部分隐藏 */
  overflow: hidden;
}
.detail-collection .collection1 li .img-box {
  width: 184px;
  height: 184px;
  margin: 0 auto;
}
.detail-collection .collection1 li .img-box img {
  width: 100%;
  height: 100%;
}
.detail-collection .collection1 li .info {
  padding: 0 30px 13px 30px;
}
.detail-collection .collection1 li .info h3 {
  font-size: 20px;
  font-weight: 400;
}
.detail-collection .collection1 li .info .type {
  font-size: 16px;
}
.detail-collection .collection1 li .info .price {
  font-size: 22px;
  color: #d84747;
}
/*-----------------------我的足迹------------------------*/
.detail-history {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin: 5px auto;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
}
.detail-history .history0 {
  display: flex;
  justify-content: space-between;
}
.detail-history .history0 .right {
  margin-top: 10px;
}
.detail-history .history1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  width: 992px;
  height: 500px;
}
.detail-history .history1 li {
  position: relative;
  width: 242px;
  height: 380px;
  border: 2px solid #fff;
  /* 超出部分隐藏 */
  overflow: hidden;
}
.detail-history .history1 li .img-box {
  width: 184px;
  height: 184px;
  margin: 0 auto;
}
.detail-history .history1 li .img-box img {
  width: 100%;
  height: 100%;
}
.detail-history .history1 li .info {
  padding: 0 30px 13px 30px;
}
.detail-history .history1 li .info h3 {
  font-size: 20px;
  font-weight: 400;
}
.detail-history .history1 li .info .type {
  font-size: 16px;
}
.detail-history .history1 li .info .price {
  font-size: 22px;
  color: #d84747;
}
